<!DOCTYPE html>
<html>
<head>
<#include "/freemarker/fw/meta_top.ftl">
    <title>Book Create</title>
    <#include "/freemarker/fw/load_static.ftl">
    <style>
        label{
            float: left;
            width: 100%;
            display: table;
        }
        label input{
            width: 100%;
        }
        .tag-label{
            border: 1px solid #bbb;
            background-color: #fff;
        }
        .tag-input{
            border: none;
            margin: 0;
        }
        textarea{
            margin: 0 0 5px 0;
            width: 100%;
            height: 180px;
            resize: none;
        }
        .cover-label {
            position: relative;
        }
        .cover-label:hover .upload-co{
            display: block;
        }
        .cover-label .upload-co{
            display: none;
            position: absolute;
            bottom: 0;
            line-height: 50px;
            text-align: center;
            height: 50px;
            background-color: #58c;
            color: #fff;
            font-size: 20px;
        }
        .cover-label .upload-co input{
            width: 100%;
            height: 100%;
            margin-top: -50px;
            opacity: 0;
        }
    </style>
</head>
<body>
<#include "/freemarker/fw/navbar_top.ftl">
<div class="container">
    <div class="create_form">
        <form method="post" class="row">
            <div class="col-sm-4">
                <label class="cover-label">
                    <img class="cover" src="/asset/images/default_book_cover_0.jpg" width="160" height="180">
                    <input name="cover" type="hidden" value="/asset/images/default_book_cover_0.jpg">
                    <div class="upload-co">
                        上传头像
                        <input type="file" name="photo">
                    </div>
                </label>
            </div>
            <div class="col-sm-8">
                <label>
                    <input type="text" name="bookname" placeholder="书籍名称">
                </label>
                <label>
                    <input type="text" name="pseudonym" placeholder="笔名">
                </label>
                <label>
                    <div class="tag-label">
                        <input class="tag-input" placeholder="标签" type="text" style="width: 78px; height: 34px; margin: 0;">
                    </div>
                </label>
            </div>
            <div class="col-sm-12">
                <label>
                    <textarea name="description"></textarea>
                </label>
            </div>
        </form>
        <label>
            <button class="btn btn-default" style="width: 100%;" type="submit">提&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;交</button>
        </label>
    </div>
    <script>
        $(document).ready(function(){
            $(".tag-input").on("keydown", function(e){
                if(e.keyCode == 13 && $(e.target).val()){
                    var $tag = $("<span class='tag label label-primary' style='margin-top: 7px'>" + $(e.target).val().trim() + "<input type='hidden' name='tag[]' value='" + $(e.target).val().trim() + "'></span>");
                    $(e.target).before($tag);
                    $(e.target).val("");
                }
                if(e.keyCode == 8 && !$(e.target).val())
                    $(e.target).parent().prev().remove()
            });

            $("button").click(function(){
                $("form").submit();
            });


            $(".cover-label input[type='file']").on("change", function(e){
                var file = e.target.files[0];
                var allows = ["image/gif", "image/jpg", "image/png"];
                console.log(file.type.trim() in allows);

                var formData = new FormData();
                formData.append("file", file);
                var xhr = new XMLHttpRequest();
                xhr.open('POST', '/attach/save');
                xhr.onreadystatechange = function(){
                    if (xhr.readyState==4 && xhr.status==200){
                        var response = JSON.parse(xhr.response);
                        if(response.id){
                            $("input[name='cover']").val("/attach/dis/" + response.id);
                            $("img.cover").attr({src: "/attach/dis/" + response.id })
                        }
                    }
                };
                xhr.send(formData);
            });
        });
    </script>
</div>
</body>
</html>